var ws = new WebSocket("ws://localhost:8080/ws/api");


function getMassageElem(userName, data) {
    var content = document.createElement("div");
    content.setAttribute("class", "content_wrap")
    var user_masg = document.createElement('div')
    user_masg.setAttribute('class', "user_masg")
    var user_title = document.createElement("div");
    user_title.innerHTML = "用户名：";
    user_masg.appendChild(user_title);
    var user_name = document.createElement('div');
    user_name.setAttribute('class', 'user_name')
    user_name.innerHTML = userName;
    user_masg.appendChild(user_name);
    content.appendChild(user_masg);
    var ul = document.createElement("ul");
    ul.setAttribute('class', 'msg');
    content.appendChild(ul);
    var li = document.createElement('li')
    li.innerHTML = data
    ul.appendChild(li)
    console.log(content)
    return content;
}

function send_massage(data, id) {

}

function getBrother(node) {
    var elms = [];
    var elm = node.parentNode.children;
    for (let i = 0; i < elm.length; i++) {
        if (elm[i] !== node) elms.push(elm[i]);
    }
    return elms;
}



window.onload = function() {
    var id = 1;
    document.querySelector(".user_xiaoming").addEventListener("click", function(e) {
        this.setAttribute("class", this.getAttribute('class') + " active")
        var brotherNodes = getBrother(this);
        for (let i = 0; i < brotherNodes.length; i++) {
            brotherNodes[i].setAttribute('class', brotherNodes[i].getAttribute('class').replace(' active', ''))
        }
        id = 1
    }, false)

    document.querySelector(".user_xiaolan").addEventListener("click", function(e) {
        this.setAttribute("class", this.getAttribute('class') + " active")
        var brotherNodes = getBrother(this);
        for (let i = 0; i < brotherNodes.length; i++) {
            brotherNodes[i].setAttribute('class', brotherNodes[i].getAttribute('class').replace(' active', ''))
        }
        id = 2
    }, false)

    document.querySelector(".user_xiaohua").addEventListener("click", function(e) {
        this.setAttribute("class", this.getAttribute('class') + " active")
        var brotherNodes = getBrother(this);
        for (let i = 0; i < brotherNodes.length; i++) {
            brotherNodes[i].setAttribute('class', brotherNodes[i].getAttribute('class').replace(' active', ''))
        }
        id = 3
    }, false)


    var send_xiaom = document.querySelector("#xm_send");
    send_xiaom.addEventListener("click", function() {
        var value = document.querySelector("#xm_msg").value
        send_massage(value, id)
        ws.send(value)
        document.querySelector("#xm_msg").value = ""
    }, false)


    document.querySelector("#open_xiaoming").addEventListener('click', function() {
        console.log("登录")
        notShow()
    })

    ws.onopen = function(evt) {
        console.log("Connection open ...");
        ws.send("Hello WebSockets!");
    };


    function open_xiaohua() {
        ws.onopen = function(evt) {
            console.log("Connection open ...");
            ws.send("Hello WebSockets!");
        };
    }

    function open_xiaolan() {
        ws.onopen = function(evt) {
            console.log("Connection open ...");
        };

    }


    function notShow() {
        var buttns = document.getElementsByClassName("logining");
        for (let i = 0; i < buttns; i++) {
            buttns[i].style.display = "none"
        }
    }



    ws.onmessage = function(evt) {
        console.log(evt)
        var node = getMassageElem('小明', evt.data)
        var msg_ = '';
        switch (id) {
            case 1:
                msg_ = document.querySelector(".msg_wrap_xiaoming");
                break;
            case 2:
                msg_ = document.querySelector(".msg_wrap_xiaolan");
                break;
            case 3:
                msg_ = document.querySelector(".msg_wrap_xiaohua");
                break;
        }
        msg_.appendChild(node)
    };

    ws.onclose = function(evt) {
        console.log("Connection closed.");
    };

}